<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>7.0 event deal</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <!--使用v-on监听时间-->
    <button v-on:click="counter +=1">点击了{{counter}}</button>
    <hr>
    <!--接受定义的方法调用-->
    <button v-on:click="greet">Greet</button><br>
    <!--直接绑定内联javascript语句-->
    <button v-on:click="say('hello')">Inner</button>
</div>
<hr>
<div id="eventModifier">
    <!--
    事件修饰符
        Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
        Vue.js通过由点(.)表示的指令后缀来调用修饰符。
            .stop
            .prevent
            .capture
            .self
            .once
    -->
    <!-- 阻止单击事件冒泡 -->
    <a v-on:click.stop="doThis"></a>
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>
    <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

    <!-- click 事件只能点击一次，2.1.4版本新增 -->
    <a v-on:click.once="doThis"></a>


</div>
<script>
    var evet=new Vue({
        el:"#eventModifier",
        data:{},
        methods:{
            doThis:function () {
                alert("doThis")
            }
        }
    });
    function say(message) {
        alert(message);
    }
    var vm = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            greet:function (event) {
                /*this在方法里指当前的Vue实例*/
                alert("Hello"+this.name+"!");
                //event是原始DOM事件
                if(event){
                    alert(event.target.tagName)
                }
            }
        }
    });
</script>
</body>
</html>